<template>
  <div class="tab">
    <div class="tab-box">
      <ul class="tab-tit clearfix">
        <li v-for="(oli,index) in tabtit" :class="{active:activeIndex==index}" @click="change(index)">{{oli}}</li>
      </ul>



    </div>
  </div>
</template>

<script>
    export default {
        name: "Nav",
      data(){
          return{
            tabtit:['详情','目录'],
            activeIndex:0,
            courseUrl:'/detail/123'
          }
      },
      props:['isActive'],
      methods:{
          change(index){
            this.activeIndex=index;
            this.$emit('tabclick',{index:index})
            //this.isActive=(this.isActive==true)?false:true;
          }
      }
    }
</script>

<style scoped>
  tab{height: .71rem;}
  .tab-box{width: 100%;max-width: 750px;height: .71rem;background-color: #fff;transition: .3s ease}
  .tab-box-fixed{position: fixed;top:0;box-shadow: 0 2px 2px rgba(163, 163, 163, 0.41);z-index: 2}
  .tab-tit{font-size: .28rem}
  .tab-tit li{display: block;position: relative;line-height: .71rem;width: 50%;float: left;text-align: center;color:#000;}
  .tab-tit li:after{display: block;content:'';height: .04rem;width:0;opacity:0;background-color: #32b16c;position: absolute;left: 50%;bottom: 0;transition: all .3s ease}
  .tab-tit li.active{color:#32b16c}
  .tab-tit li.active:after{width:30%;opacity:1;margin-left: -15%;}
</style>
